<!--
Copyright 2014 The Chromium Authors. All rights reserved.
Use of this source code is governed by a BSD-style license that can be
found in the LICENSE file.
-->

<polymer-element name="ct-tree-select" attributes="tree treeList">
  <template>
    <select id='treeSelect' on-change="{{ _updateTree }}" value="{{ tree }}">
      <template repeat="{{ s in treeList.trees }}">
        <option value="{{ s.name }}">{{ s.displayName }}</option>
      </template>
    </select>
  </template>
  <script>
  (function() {
    Polymer({
      publish: {
        tree: {
          reflect: true,
        },
      },

      _updateTree: function(event) {
        this.asyncFire('navigate', {
          url: event.target.value
        });
      },

      treeChanged: function() {
        if (!this.tree.length)
          return;

        // Enforce the tree list, so we don't show a blank select value.
        var option = this.$.treeSelect.querySelector('option[value="' + this.tree + '"]');
        if (!option) {
          // URL is incorrect. Replace with the root so we use the default tree.
          this.asyncFire('navigate', {
            url: '/',
            replaceState: true
          });
        }
      },
    });
  })();
  </script>
</polymer-element>
